import React, { useState, useEffect } from "react";

import type { MenuProps } from "antd";
import { Menu, Radio, DatePicker, Space, Input } from "antd";
import type { SizeType } from "antd/es/config-provider/SizeContext";
import type { RadioChangeEvent } from "antd";
import { useNavigate, useRoutes } from "react-router-dom";
import "./index.scss";
import { Outlet } from "react-router-dom";
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";
const Pro_Focus = () => {
  const { RangePicker } = DatePicker;
  const { Search } = Input;

  const items: MenuProps["items"] = [
    {
      label: "关注商品",
      key: "/index/pro/profocus/focus",
    },
    {
      label: "推送商品",
      key: "/index/pro/profocus/focusts",
    },
  ];

  const [current, setCurrent] = useState("mail");
  const history: any = useNavigate();
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    history(e.key);
    setCurrent(e.key);
  };
  
  const [size, setSize] = useState<SizeType>("small");

  const onChange = async (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };
  const onSearch = (value: string) => console.log(value);

  return (
    <div>
      <div className="head">
        <div className="headers_root">
          <Menu
            className="menu"
            onClick={onClick}
            selectedKeys={[current]}
            mode="horizontal"
            items={items}
          />
        </div>
        <div className="radio">
          <Search
            className="search"
            allowClear
            enterButton="搜索"
            onSearch={onSearch}
          />
        </div>
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export default Pro_Focus;
